<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册</title>
    <link rel="shortcut icon" type="image/x-icon" href="theme/icon/favicon.ico">
	<link rel="stylesheet" type="text/css" href="theme/css/base.css">
	<link rel="stylesheet" type="text/css" href="theme/css/login.css">
	
		<script type="text/javascript">
		function $(str){
			return document.getElementById(str);
		}
	
	
		//可读性   简洁性  面向对象
		function checkItem(obj){
			//  获取input节点的name
			var inputNameEle = obj.name;
			var inputValue = obj.value;
			//  找到当前接的下一个的span节点
			var spanEle = obj.parentNode.getElementsByTagName("span")[0];
			var msg = "";
			var bool = true;
			switch (inputNameEle) {
				case "username":
					if(inputValue == "" ){
						msg = "用户名不能为空！！！"
					}else{
						bool = false;
					}
					break;
				case "realname":
					if(inputValue == "" ){
						msg = "真实名字不能为空！！！"
					}else if(inputValue.length > 30){
						msg = "真实名字不能超过25个汉字！！！"
					}else if(/[^\u4E00-\u9FA5]/g.test(inputValue)){
						msg = "名字必须是汉字！！！"
					}else{
						bool = false;
					}
					break;
				case "password1":
					if(inputValue == "" ){
						msg = "密码不能为空！！！"
					}else{
						bool = false;
					}
					break;
				case "password":
					if($("password").value != inputValue){
						msg = "两次密码不一致！！！"
					}else{
						bool = false;
					}
					break;
				case "birth":
					if(inputValue == "" || (!/\d{4}[-]\d{1,2}[-]\d{1,2}/.test(inputValue))){
						msg = "生日不能为空！！！"
					}else{
						bool = false;
					}			
					break;
				case "idCard":
					if(inputValue == "" || !/((\d{17}\w{1})|(\d{15}))/.test(inputValue)){
						msg = "身份证号码不正确！！！"
					}else{
						bool = false;
					}
					break;
				case "email":
					if(inputValue == ""  || !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(inputValue)){
						msg = "邮箱格式不正确！！！"
					}else{
						bool = false;
					}
					break;
				case "address":
					if(inputValue == "" ){
						msg = "住址不能为空！！！"
					}else{
						bool = false;
					}
					break;
				case "mobile":
					if(inputValue == "" || !/^1[3|4|5|7|8][0-9]{9}$/.test(inputValue)){
						msg = "电话号码格式不正确！！！"
					}else{
						bool = false;
					}
					break;
				case "checkNum":
					if(inputValue == ""){
						msg = "请输入验证码！！！"
					}else if(1==2){
						msg = "验证码不正确！！！"
					}else{
						bool = false;
					}
					break;
			}
			
			
			if(bool){
				spanEle.innerText = msg;
				spanEle.className="error";
			}
			
			return bool;
			
		}
	
		//失去焦点的作用
		function focusItem(obj){
			var spanEle = obj.parentNode.getElementsByTagName("span")[0];
			spanEle.innerText = "";
			spanEle.className="";
		}
	
	
		function bt_submit(){
			// 获取from节点
			var sub_from = $("subForm");
			// 获取from下所有的input节点
			var inputEle = sub_from.getElementsByTagName("input");
			
			//循环所有的input节点  传入checkItem方法 做判断输入的值符不符合我们的要求
			var bool = true;
			for (var i = 0; i < inputEle.length; i++) {
				// 拿到需要验证的input节点
				if(inputEle[i].getAttribute("onblur")){
					//  判断是否通过我们的验证   没有通过的才进入if 改变bool >> 无法提交
					if(checkItem(inputEle[i])){
						bool = false;
					}
				}
			}
			
			if(bool){
				//提交表单
				sub_from.submit();
			}
			
		}
	</script>
	
 </head>
 <body>

<!--- header begin-->
<header id="pc-header">
    <div class="login-header" style="padding-bottom:0">
        <div><h1><a href="index.html"><img src="theme/icon/logo.png"></a></h1></div>
    </div>
</header>
<!-- header End -->



<section id="login-content">
    <div class="login-centre" style="height: 900px;">
        <div class="login-switch clearfix">
            <p class="fr">我已经注册，现在就 <a href="login.html">登录</a></p>
        </div>
        <div class="login-back">
            <div class="H-over">
                <form action="register" method="method" id="subForm">
                    <div class="login-input">
                        <label><i class="heart">*</i>用户名：</label>
                        <input type="text" class="list-input1" id="username" name="username" onfocus="focusItem(this)" onblur="checkItem(this);">
                    	<span></span>
                    </div>
                    <div class="login-input">
                        <label><i class="heart">*</i>真实姓名：</label>
                        <input type="text" class="list-input1" id="realname" name="realname" onfocus="focusItem(this)" onblur="checkItem(this);">
                    	<span></span>
                    </div>
                    <div class="login-input">
                        <label><i class="heart">*</i>请设置密码：</label>
                        <input type="text" class="list-input" id="password"  name="password1" onfocus="focusItem(this)" onblur="checkItem(this);">
                   		<span></span>
                    </div>
                    <div class="login-input">
                        <label><i class="heart">*</i>请确认密码：</label>
                        <input type="text" class="list-input" id="password1" name="password" onfocus="focusItem(this)" onblur="checkItem(this);">
                    	<span></span>
                    </div>
                    <div class="login-input" >
						<label><i class="heart">*</i>性别：</label>
						<input class="radio" type="radio" name="sex" value="male" checked="checked" style="width:20px;"/><label style="width:50px;text-align: left;">男性</label>
						<input class="radio" type="radio" name="sex" value="femal" style="width:20px;"/><label style="width:50px;text-align: left;">女性</label>
						<span></span>
					</div> 
					<div class="login-input">
						<label><i class="heart">*</i>出生日期：</label>
						<input class="text" type="text" name="birth" onfocus="focusItem(this)" onblur="checkItem(this);"  value=""/>
						<span></span>
					</div>
					<div class="login-input">
						<label><i class="heart">*</i>身份证：</label>
						<input class="text" type="text" name="idCard" onfocus="focusItem(this)" onblur="checkItem(this);"   value=""/>
						<span></span>
					</div>
					<div class="login-input">
						<label><i class="heart">*</i>电子邮件：</label>
						<input class="text" type="text" name="email" onfocus="focusItem(this)" onblur="checkItem(this);"   value=""/>
						<span></span>
					</div>
					<div class="login-input">
						<label><i class="heart">*</i>地址(*)：</label>
						<input class="text" type="text" name="address" onfocus="focusItem(this)" onblur="checkItem(this);"   value=""/>
						<span></span>
					</div>
                    <div class="login-input">
                        <label><i class="heart">*</i>手机号：</label>
                        <input type="text" class="list-input" id="mobile" name="mobile" onfocus="focusItem(this)" onblur="checkItem(this);">
                        <span></span>
                    </div>
                    <div class="login-input">
                        <label><i class="heart">*</i>验证码：</label>
                        <input type="text" class="list-input" id="checkNum" name="checkNum" onfocus="focusItem(this)" onblur="checkItem(this);">
                        <span></span>
                    </div>
                    <div class="login-button">
                        <a href="javascript:bt_submit();"  >立即注册</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<!--- footer begin-->
<footer id="footer">
    <div class="containers">
        <div class="w" style="padding-top:30px">
            <div id="footer-2013">
                <div class="links">
                    <a href="">关于我们</a>
                    |
                    <a href="">联系我们</a>
                    |
                    <a href="">人才招聘</a>
                    |
                    <a href="">商家入驻</a>
                    |
                    <a href="">广告服务</a>
                    |
                    <a href="">手机京东</a>
                    |
                    <a href="">友情链接</a>
                    |
                    <a href="">销售联盟</a>
                    |
                    <a href="">English site</a>
                </div>
                <div style="padding-left:10px">
                    <p style="padding-top:10px; padding-bottom:10px; color:#999">网络文化经营许可证：浙网文[2013]0268-027号| 增值电信业务经营许可证：浙B2-20080224-1</p>
                    <p style="padding-bottom:10px; color:#999">信息网络传播视听节目许可证：1109364号 | 互联网违法和不良信息举报电话:0571-81683755</p>
                </div>
            </div>
        </div>

    </div>
</footer>
<!-- footer End -->
</body>
</html>